<script setup lang="ts">
import { reactive } from "vue";

// 按需引入需要的图标
import { Message } from "@element-plus/icons-vue"
import createAxios from "../request";
import { ElMessage } from "element-plus";
import router from "../router";
import { el } from "element-plus/es/locales.mjs";
let axios = createAxios();

let loginForm = reactive({
    account: '',
    password: '',
    email: ''
});

let resetPassword = () => {
    axios({
        url: "/reset",
        method: "POST",
        data: {
            email: loginForm.email
        }
    }).then((res) => {
        //请求成功
        if (res.data == 0) {
            ElMessage.error("该邮箱未注册")
        } else if (res.data == 1) {
            ElMessage.success("密码重置成功，请前往邮箱查看新密码。")
        }
        console.log(res.data);
    }).catch((err) => {
        //请求失败·
        ElMessage.error("请求失败")
        console.log(err);
    })
}


</script>

<template>
    <div id="login">
        <el-form :model="loginForm" label-width="auto" style="max-width: 600px">
            <div style="text-align: center;color: rgb(177.3, 179.4, 183.6)">请填写您的公司邮箱地址,我们会将新的随机密码发送给您的邮箱。</div>
            <div class="item"><el-col :span="18">
                    <el-input :prefix-icon="Message" type="password" v-model="loginForm.email" placeholder="请输入邮箱地址" />
                </el-col></div>

            <div class="item">
                <el-form-item>
                    <el-button @click="resetPassword" type="primary" color="#000">重置密码</el-button>
                </el-form-item>
            </div>
            <div class="item">
                <RouterLink to="/start/login">
                    <el-link type="primary">＜返回登录</el-link>
                </RouterLink>
            </div>
        </el-form>
    </div>
</template>

<style scoped>
#login {
    width: 100%;
    height: 100%;
    background-color: aliceblue;
    border: 1px solid rgb(115.2, 117.6, 122.4);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px rgb(255, 255, 255);
}

.item {
    display: flex;
    justify-content: center;
}
</style>